<template>
  <div class="cloud-database-dashboard">

    <el-tabs v-model="activeTab" class="top-tabs" @tab-click="handleTab">
        <el-tab-pane label="服务器列表" name="CloudResources" style="font-size: 22px">
          <CloudResources v-if="activeTab=='CloudResources'"
                          @updateCurrentResource="updateCurrentResource"
                          @updateResourceList="updateResourceList"
                          @showServerInfor="showServerInfor" ></CloudResources>
        </el-tab-pane>
        <el-tab-pane label="服务器详情" name="ServerInfor">
          <ServerInfor v-if="activeTab=='ServerInfor'" :current-resource="currentResource" :resource-list="resourceList"></ServerInfor>
        </el-tab-pane>
        <el-tab-pane label="访问控制" name="AccessControl">
          <AccessControl v-if="activeTab=='AccessControl'" :current-resource="currentResource" :resource-list="resourceList"></AccessControl>
        </el-tab-pane>
        <el-tab-pane label="云盘/快照" name="CloudSnapshot">
          <CloudSnapshot v-if="activeTab=='CloudSnapshot'" :current-resource="currentResource" :resource-list="resourceList"></CloudSnapshot>
        </el-tab-pane>
        <el-tab-pane label="监控" name="ServerMonitor">
          <ServerMonitor v-if="activeTab=='ServerMonitor'" :current-resource="currentResource" :resource-list="resourceList"></ServerMonitor>
        </el-tab-pane>
        <el-tab-pane label="主机安全" name="HostSecurity">
          <HostSecurity v-if="activeTab=='HostSecurity'" :current-resource="currentResource" :resource-list="resourceList"></HostSecurity>
        </el-tab-pane>
        <el-tab-pane label="计划任务" name="ScheduledTasks">
          <ScheduledTasks v-if="activeTab=='ScheduledTasks'" :current-resource="currentResource" :resource-list="resourceList"></ScheduledTasks>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="OperationLogs">
          <OperationLogs v-if="activeTab=='OperationLogs'" :current-resource="currentResource" :resource-list="resourceList"></OperationLogs>
        </el-tab-pane>
      </el-tabs>

  </div>
</template>
<script>
import CloudResources from '@/views/bom/hostresource/resource.vue'
import ServerMonitor from '@/views/bom/hostresource/monitor.vue'
import CloudSnapshot from '@/views/bom/hostresource/cloudSnapshot.vue'
import ServerInfor from '@/views/bom/hostresource/serviceInfor.vue'
import HostSecurity from '@/views/bom/hostresource/hostSecurity.vue'
import ScheduledTasks from '@/views/bom/hostresource/scheduledTasks.vue'
import OperationLogs from '@/views/bom/hostresource/operationLogs.vue'
import AccessControl from '@/views/bom/hostresource/accessControl.vue'
export default {
  name: "hostresource",
  components: {
    CloudResources,
    ServerMonitor,
    CloudSnapshot,
    ServerInfor,
    HostSecurity,
    ScheduledTasks,
    OperationLogs,
    AccessControl

  },
  data() {
    return {
      activeTab: 'CloudResources',
      currentResource: null,
      resourceList: [],
    };
  },
  created() {
  },
  methods: {
    handleTab(tab) {
      console.log("切换到标签页:", tab.name);
    },
    updateCurrentResource(resource) {
      this.currentResource = resource;
      console.log("更新当前资源:", this.currentResource);
    },
    updateResourceList(resourceList)
    {
        this.resourceList = resourceList;
        console.log("更新资源列表:", this.resourceList);
    },
    showServerInfor(resource) {
      this.activeTab = 'ServerInfor';
      this.updateCurrentResource(resource);
    }
  },
  watch: {
    activeTab(newVal) {
      console.log('标签页切换到:', newVal);
    },
    currentResource(newVal) {
      console.log('当前资源更新:', newVal);
    }
  }
};
</script>
<style scoped>
.cloud-database-dashboard {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  color: #333;
  background-color: #f5f7fa;
  padding: 10px;
  min-height: 100vh;
}

/* 顶部标签样式 */
.top-tabs {
  background-color: #fff;
  padding: 10px 20px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  border-bottom: none;
}

.top-tabs .el-tabs__header {
  margin-bottom: 0;
}

.top-tabs .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #e4e7ed;
}

.top-tabs .el-tabs__item {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
}

.top-tabs .el-tabs__item.is-active {
  color: #409EFF;
  font-weight: bold;
}

</style>
